<template>
  <div class="inputClass solidClass checkboxClass">
    <label :for="taskMsg.taskName">
      <input :id="taskMsg.taskName" type="checkbox" v-model="taskMsg.taskState"> {{taskMsg.taskName}}
    </label>
    <span class="spanClass">
        <button class="buttonClass" @click="deleteTrue(index,taskMsg)" v-show="taskMsg.taskState">删除已完成</button>
      </span>
  </div>
</template>

<script>
  import PubSub from 'pubsub-js'

  export default {
    name: "items",
    props: {
      taskMsg: Object,
      index: Number,
      // 方式四：PubSub的发布订阅，此并不局限于父子，也可以父、孙关系1.0
      // deleteTask: Function
    },
    methods: {
      deleteTrue(index, taskMsg) {
        const taskState = taskMsg.taskState;
        if (taskState == null || !taskState) {
          alert("无法删除未完成的任务...")
          return
        }
        const taskName = taskMsg.taskName;
        if (taskName != null) {
          if (window.confirm("确定要删除名称为<" + taskName + ">的任务吗？")) {
            // this.deleteTask(index);
            //方式四：PubSub的发布订阅，此并不局限于父子，也可以父、孙关系1.0
            //发布消息
            PubSub.publish('deleteTask', index)
          }
        }
      }
    }
  }
</script>

<style scoped>
  .inputClass {
    width: 99%;
    height: 50px;
  }

  .solidClass {
    border: 1px solid silver
  }

  .checkboxClass {
    padding-top: 12px;
    padding-left: 5px;
  }

  .buttonClass {
    background-color: mediumvioletred;
    border: 0px;
    border-radius: 5px
  }

  .spanClass {
    float: right;
    padding-right: 10px;
  }
</style>
